<template>
  <div>
    <van-nav-bar left-arrow title="客服中心">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <template class="que">
      <van-row>猜你想问</van-row>
      <van-cell is-link @click="showPopup">如何预约车辆</van-cell>
      <van-popup
        round
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show></Show
      ></van-popup>
      <van-cell is-link @click="showPopup1">时长费是什么</van-cell>
      <van-popup
        round
        v-model="show1"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show1></Show1
      ></van-popup>
      <van-cell is-link @click="showPopup2">为什么要预支付车费</van-cell>
      <van-popup
        round
        v-model="show2"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show2></Show2
      ></van-popup>
      <van-cell is-link @click="showPopup3">如何拉黑司机</van-cell>
      <van-popup
        round
        v-model="show3"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show3></Show3
      ></van-popup>
      <van-cell is-link @click="showPopup4">如何查询行驶轨迹</van-cell>
      <van-popup
        round
        v-model="show4"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show4></Show4
      ></van-popup>
    </template>
    <template>
      <van-row>快捷入口</van-row>
      <van-cell is-link @click="showPopup5">我的黑名单</van-cell>
      <van-popup
        round
        v-model="show5"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show5></Show5
      ></van-popup>
      <van-cell is-link @click="showPopup6">查询处理进度</van-cell>
      <van-popup
        round
        v-model="show6"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        ><Show6></Show6
      ></van-popup>
    </template>
    <van-grid direction="horizontal" :column-num="2">
      <van-grid-item icon="phone-o" text="安全专线" to="/show7"></van-grid-item>
      <van-grid-item
        icon="service-o"
        text="联系客服"
        to="/liaotian"
      ></van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Show from "./Show";
import Show1 from "./Show1";
import Show2 from "./Show2";
import Show3 from "./Show3";
import Show4 from "./Show4";
import Show5 from "./Show5";
import Show6 from "./Show6";
// import Show7 from './Show7.vue'
// import show8 from "./Show8";
export default {
  components: {
    Show,
    Show1,
    Show2,
    Show3,
    Show4,
    Show5,
    Show6,
    // Show8,
  },
  data() {
    return {
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      // show7:false,
      // show8: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup1() {
      this.show1 = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    showPopup4() {
      this.show4 = true;
    },
    showPopup5() {
      this.show5 = true;
    },
    showPopup6() {
      this.show6 = true;
    },
    // show7(){
    //   this.show7 = true;
    // },
    // show8() {
    //   this.show8 = true;
    // },
  },
};
</script>

<style scoped>
body {
  background-color: rgb(236, 235, 235);
}
.van-row {
  background-color: white;
  font-size: 20px;
  color: darkgray;
  margin: 10px 0;
  padding: 0 10px;
  height: 30px;
}
.que {
  margin: 10px 0;
}
.van-grid {
  position: bottom;
  width: 100%;
  color: orange;
  margin: 10px 0;
}
.van-popup {
  padding: 10px 0;
}
</style>